<script setup lang="ts">
import { useGLTF } from '@tresjs/cientos'
import { MeshStandardMaterial } from 'three';
import * as THREE from 'three';
import { watch } from 'vue';
// 定义 props
const props = defineProps<{

  materialColor: string;
  position: { x: number; y: number; z: number };
}>();
// 监听props materialColor 发生变化
// watch(() => props.materialColor, (newColor) => {

//   // 更新材质颜色
//   (nodes.cameraglb.children[0] as THREE.Mesh).material.color.set(newColor);
// });
// 监听props position 发生变化
// watch(() => props.position.x, (newPosition) => {
// console.log('🚀 ~ watch ~ newPosition:', newPosition)

//   // 更新位置
//   nodes.cameraglb.position.setX(newPosition);
// });
// // 监听props position 发生变化
// watch(() => props.position.y, (newPosition) => {

//   // 更新位置
//   nodes.cameraglb.position.setY(newPosition);
// });
// // 监听props position 发生变化
// watch(() => props.position.z, (newPosition) => {

//   // 更新位置
//   nodes.cameraglb.position.setZ(newPosition);
// });


const { nodes } = await useGLTF('/models/cartoon_camera.glb', { draco: true })
console.log('🚀 ~ nodes:', nodes)
nodes.cameraglb.scale.set(0.5, 0.5, 0.5)
nodes.cameraglb.position.set(0, 0, 0)
 // 创建一个新的 MeshStandardMaterial 实例
 const newMaterial = new MeshStandardMaterial({
    color: 0xff0000, // 设置材质颜色为红色
    metalness: 1, // 设置金属感
    roughness: 0.5, // 设置粗糙度
    opacity: 0, // 设置透明度
  });
    // 将新材质分配给物体
    (nodes.cameraglb.children[0] as THREE.Mesh).material = newMaterial
    console.log('🚀 ~ nodes.cameraglb.material:',(nodes.cameraglb.children[0] as THREE.Mesh).material)

</script>

<template>

  <primitive :object="nodes.cameraglb" />
</template>
